<script setup lang="ts">
import { getDeviceThresholdList, removeDevicethreshold } from '@/api/device';
import type { DeviceThreshold } from '@/api/device/type';
import { onMounted, ref } from 'vue';
import ThresholdCreate from './components/ThresholdCreate.vue';
import type { Result } from '@/utils/request';
import { ElMessage } from 'element-plus';
import ThresholdEdit from './components/ThresholdEdit.vue';

const thresholdList = ref([] as DeviceThreshold[]);
const showCreate = ref(false);
const showEdit = ref(false);
const item = ref({} as DeviceThreshold);
onMounted(() => {
    init();
})

const init = () => {
    getDeviceThresholdList().then((res) => {
        thresholdList.value = res.data;
    })
}

const openDelete = (thresholdId: string) => {
    removeDevicethreshold(thresholdId).then((res) => {
        const {msg} = res as Result;
        ElMessage({
            type: 'success',
            message: msg
        })
    })
}

const openEdit = (deviceThreshold: DeviceThreshold) => {
    item.value = deviceThreshold;
    showEdit.value = true;
}

</script>

<template>
    <div class="container">
        <div class="header">
            <el-button type="primary" @click="showCreate = true">创建阈值</el-button>
        </div>
        <div class="content">
            <el-table :data="thresholdList" style="width: 100%" stripe border>
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="deviceId" label="机器ID" />
                <el-table-column prop="temperatureUpper" label="温度上限" />
                <el-table-column prop="temperatureLower" label="温度下限" />
                <el-table-column prop="humidityUpper" label="湿度上限" />
                <el-table-column prop="humidityLower" label="湿度下限" />
                <el-table-column prop="created" label="创建时间" />
                <el-table-column prop="updated" label="更新时间" />
                <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="openDelete(scope.row.id)">删除</el-button>
                    <el-button link type="primary" size="small" @click="openEdit(scope.row)">修改</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <ThresholdCreate v-model="showCreate" @refresh="init"></ThresholdCreate>
        <ThresholdEdit v-if="showEdit" v-model="showEdit" @refresh="init" :data="item"></ThresholdEdit>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    .header {
        margin-bottom: 1%;
    }
}
.content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
</style>